<template>
  <div class="select-top-container">
    <el-radio-group @change="$emit('updateTable')" v-model="selectData.isOn">
      <el-radio-button :label="0">出售中</el-radio-button>
      <el-radio-button :label="1">仓库中</el-radio-button>
    </el-radio-group>

    <el-form label-position="left" :model="selectData" label-width="80px">
      <el-form-item label="本店分类:" prop="prtCode">
        <el-select
          clearable
          v-model="selectData.prtType"
          placeholder="请选择分类"
        >
          <el-option
            v-for="item of prtType"
            :key="item.uuid"
            :label="item.typeName"
            :value="item.typeName"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="发布时间:" prop="context">
        <el-select
          clearable
          v-model="selectData.releaseTime"
          placeholder="请选择分类"
        >
          <el-option value="最近一个月" label="最近一个月" />
        </el-select>
      </el-form-item>

      <el-form-item label="产品名称:">
        <el-input v-model="selectData.prtName"></el-input>
      </el-form-item>

      <el-form-item>
        <div style="min-width:155px">
          <el-button @click="handleClick">搜索</el-button>
          <el-button>新增</el-button>
        </div>
      </el-form-item>
    </el-form>
    <!-- 
    <el-tabs v-model="selectData.sortName" @tab-click="handleClick">
      <el-tab-pane label="序号升序" name="序号升序"></el-tab-pane>
      <el-tab-pane label="序号降序" name="序号降序"></el-tab-pane>
      <el-tab-pane label="浏览量升序" name="click_count"></el-tab-pane>
      <el-tab-pane label="浏览量降序" name="浏览量降序"></el-tab-pane>
      <el-tab-pane label="无视频" name="无视频"></el-tab-pane>
    </el-tabs> -->
  </div>
</template>

<script>
import { getProductTypeList } from "@/api";
export default {
  name: "SelectTop",
  props: {
    tableSelectData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      selectData: {
        isOn: 0,
        prtCode: "",
        prtName: "",
        releaseTime: ""
      },
      //分类
      prtType: []
    };
  },

  created() {
    this.getProductTypeList();
    this.init();
  },

  watch: {
    selectData: {
      handler(newVal, oldVal) {
        for (const key in newVal) {
          if (newVal.hasOwnProperty(key)) {
            const element = newVal[key];
            this.$set(this.tableSelectData, key, element);
          }
        }
      },
      deep: true
    }
  },

  methods: {
    init() {
      for (const key in this.selectData) {
        if (this.selectData.hasOwnProperty(key)) {
          const element = this.selectData[key];
          this.$set(this.tableSelectData, key, element);
        }
      }
    },

    handleClick(tab, event) {
      this.$emit("updateTable");
    },

    //获取产品类型--------------------------------------------
    async getProductTypeList() {
      const shopUuid = this.$store.getters.shopUuid;
      const params = {
        page: 0,
        pageSize: 0,
        shopUuid
      };
      let res = await getProductTypeList(params).catch(err => console.log(err));
      if (!res) return;
      this.prtType = res.items;
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form {
  margin: 10px 0;
  display: flex;

  .el-form-item {
    margin-bottom: 0;
    margin-right: 46px;
  }
}

::v-deep.el-tabs {
  .el-tabs__nav-wrap::after {
    background-color: transparent;
  }
}
</style>
